<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二节课</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
                 align-items: center;
                 justify-content: center;
			}
			canvas{
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>
	<body>
		<div class="container"><canvas id="canvas" width="500" height="500"></canvas></div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let ocanvas = document.getElementById('canvas');
			console.dir(ocanvas);
			let open=ocanvas.getContext("2d");
			console.dir(open);
			
			
			open.beginPath();
			
			open.arc(250,170,80,0,360*Math.PI/180,true);
		    open.fillStyle="black";
			open.fill();
			open.closePath();
	        open.fillStyle="black";
			open.fill();
			
			
			open.beginPath();	
			open.arc(215,140,10,0,360*Math.PI/180,true);
			open.strokeStyle="white";
			open.closePath();
			open.stroke();
			
			open.beginPath();	
			open.arc(285,140,10,0,360*Math.PI/180,true);
			open.strokeStyle="white";
			open.closePath();
			open.stroke();
		
		    open.beginPath();
			open.moveTo(250+45,200);
			open.arc(250,200,45,0,Math.PI/180*180,false);
			open.fillStyle="aliceblue";
			open.fill();
			open.closePath();
			open.stroke();
			
		
			open.beginPath();
			open.moveTo(280,100);
			open.lineTo(280,100);
			open.arcTo(360,100,360,110,50);
			open.lineTo(320,180);
			open.closePath();
		    open.strokeStyle="black";
			open.fillStyle="black";
			open.fill();
			open.stroke();
			
			open.beginPath();
			open.moveTo(220,100);
			open.lineTo(220,100);
			open.arcTo(145,97,145,107,50);
			open.lineTo(180,180);
			open.closePath();
			open.strokeStyle="black";
			open.fillStyle="black";
			open.fill();
			open.stroke();
			

	
			
			
		}
	</script>
</html>